<template>
  <div class="app-container">
    <el-dialog title="确认设计" :visible.sync="dialogVisible" width="512px" :before-close="handleClose" class="add-order-dialog">
      <div class="pic-list">
        <div v-for="(item, index) in designList" :key="item.url" class="pic-item" @click="chooseItem(item, index)">
          <img :src="item.url">
          <div :class="`confirm ${index === chooseIndex}`"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { confirmOrder } from '@/api/order'
export default {
  props: {
    show: { type: Boolean, default: false },
    row: { type: Object, default: () =>{} }
  },
  watch: {
    show(val) {
      this.dialogVisible = val
      if (val) {
        if (this.row?.choose_index !== null) {
          this.designList = [this.row.design_list[this.row.choose_index]]
        } else {
          this.designList = this.row.design_list
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      chooseIndex: '',
      designList: [],
    }
  },
  mounted() {
  },
  methods: {
    async confirm() {
      if (this.chooseIndex === '') {
        return this.$message({ type: 'error', message: '请选择要确认的设计稿。' })
      }
      const params = {
        orderId: this.row.id,
        chooseIndex: this.chooseIndex,
      }
      const res = await confirmOrder(params)
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '确认成功'
        })
        this.$emit('refresh')
        this.handleClose()
      }
    },
    chooseItem(pic, index) {
      this.chooseIndex = index
    },
    handleClose() {
      this.dialogVisible = false
      this.chooseIndex = ''
      this.$emit('update:show', false)
    },
  }
}
</script>
<style lang="scss" scoped>
.pic-list{
  display: flex;
  margin-top: 10px;
  .pic-item{
    width: 148px;
    height: 148px;
    border: 1px solid #c0ccda;
    margin-right: 8px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      cursor: pointer;
      &:hover{
        opacity: 0.8;
        transition: all 0.3s;
      }
    }
    .confirm.true{
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba($color: #000000, $alpha: 0.5);
      &::before{
        content: '';
        position: absolute;
        width: 60px;
        height: 60px;
        background: url('../../../assets/images/yes.png') no-repeat;
        background-size: contain;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>

